<script src='http://shjs.sourceforge.net/lang/sh_javascript.js'></script>
<script src='http://shjs.sourceforge.net/sh_main.js'></script>
<link rel="stylesheet" href="../style/style.css">
<link rel='stylesheet' type='text/css' href='../style/code.css'>

<body onload="sh_highlightDocument('sh', 'javascript');">
<div id='supercontainer' ><title>
Installation
</title>
<h1 id="exercise-1.-installing-the-chrome-extensions">Exercise 1. Installing the Chrome Extensions</h1>
<h2 id="goal">Goal</h2>
<ul>
<li>Install and test the AnymoteExample (the solution) with a Google TV</li>
<li>Install the AnymoteLearningExercise (starting code)</li>
</ul>
<h2 id="prep">Prep</h2>
<ul>
<li>This step (and all future steps) require a Google TV</li>
<li>Git clone the <a href="http://code.google.com/p/google-tv-chrome-extensions">Google TV Chrome Extensions repository</a>.</li>
</ul>
<p>Instructions for checking out the repository are available at <a href="http://code.google.com/p/google-tv-chrome-extensions/source/checkout">http://code.google.com/p/google-tv-chrome-extensions/source/checkout</a></p>
<h2 id="chrome-extensions">Chrome Extensions</h2>
<h3 id="installing-the-solution">1. Installing the solution</h3>
<p>Before doing any coding let's make sure you can load and run the solution. You will need a Google TV on the same network as your computer to fully test this part. Let's get started by installing the solution as a Chrome Extension.</p>
<ul>
<li>In Chrome, click the wrench (upper right) and go to Tools -&gt; Extensions</li>
<li>Check &quot;Developer mode&quot; option (if necessary)</li>
<li>Click &quot;Load unpacked extension...&quot;</li>
<li>Choose the AnymoteExample directory (the solution)</li>
<li>If prompted, approve the dialog box with permission to use an NPAPI binary in an extension</li>
<li>Once installed, click on the new browser action icon in the upper right to use the extension</li>
</ul>
<p>You should see a popup window that looks like this.</p>
<center>
<img src="../images/solution_start.png" width="50%" alt="AnymoteExample" title="AnymoteExample">
</center>

<p>One tester reported seeing a plugin failure at this point (white box was black). Click &quot;Delete old plugin and make a new one&quot; if this happens to you.</p>
<h3 id="testing-the-solution-with-your-google-tv">2. Testing the solution with your Google TV</h3>
<p>You should now be able to connect with your Google TV by following these steps:</p>
<ul>
<li>Click on the &quot;Start discovery&quot; button</li>
</ul>
<p>This will begin by looking for Google TVs on the local area network. If you are on the same local area network with your Google TV this should populate the IP address of your Google TV into the extension. It is possible for this step to fail on some networks if it blocks mDNS discovery. If that is the case find your Google TV IP address via Settings -&gt; Network -&gt; Status and type it into the box manually.</p>
<center>
<img src="../images/discovery.png" width="50%" alt="Discovery" title="Discovery">
</center>

<ul>
<li>Next press the &quot;Begin pairing process&quot; button. This should present a four character challenge on your Google TV.</li>
</ul>
<center>
<img src="../images/pairing_code.png" width="50%" alt="Pairing code" title="Pairing code">
</center>

<ul>
<li>Type in the four character hexidecimal challenge and click &quot;Send challenge response&quot;.</li>
</ul>
<p>This should display a successful pairing message on your TV and within your extension.</p>
<center>
<img src="../images/successful_pairing.png" width="50%" alt="Successful pairing" title="Successful pairing">
</center>

<ul>
<li>Finally press &quot;Start Anymote session&quot;, which should turn your popup window green.</li>
</ul>
<center>
<img src="../images/solution_connected.png" width="50%" alt="Solution connected" title="Solution connected">
</center>

<p>Once you have connected to your TV, the next time you open the popup it should automatically connect.</p>
<p>If you are having trouble with the AnymoteExample, close the popup window and try again, or click on &quot;Delete old plugin and make a new one&quot;. It is not an extremely friendly product. :) It is used for learning and clicking even one button out of order causes issues.</p>
<p>Hopefully you are confident that you can communicate with your Google TV! Time to learn how it works.</p>
<h3 id="installing-the-starting-point.">3. Installing the starting point.</h3>
<p>Assuming the solution runs, you can now get started with the Learning Exercise.</p>
<ul>
<li>To avoid confusion, first disable the AnymoteExample extension you installed previously by visiting Tools-&gt;Extensions and unchecking the &quot;Enabled&quot; checkbox next to AnymoteExample.</li>
<li>Now repeat the extension installation steps above for the AnymoteLearningExercise folder (i.e. click &quot;Load unpacked extension...&quot;, but this time choose the AnymoteLearningExercise directory).</li>
<li>Open the popup window for the AnymoteLearningExercise and click on each of the buttons. At this point, all of the buttons except for those in the &quot;Using Anymote&quot; section should generate a toast message indicating that its functionality hasn't yet been implemented.</li>
</ul>
<center>
<img src="../images/nonfunctional_message.png" width="50%" alt="Nonfunctional Message" title="AnymoteLearningExercise">
</center>

<p>Take a minute to look through the AnymoteLearningExercise extension files. They have a combination of typical web development files HTML, CSS, and JavaScript. Then all extensions have a manifest.json file that you should open and look at (very similar concept as the manifest.xml file in Android applications). Then note the plugin folder. This folder is very special and should be copied into any future extensions you make for Google TV.</p>
<center>
<img src="../images/files.png" width="50%" alt="Files" title="AnymoteLearningExercise files">
</center>

<p>Now that you have the extension installed and a basic idea of what files are present, you are ready to start coding up the AnymoteLearningExercise. Open up all the JavaScript files in the text editor of your choice.</p>
<p><a href="../instructions.html">Back to main page</a> <span style="float: right;">Move on to <a href="initialize_gtvremote.html">Exercise 2 Initialization</a></span></p>
